<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="../static/echarts.min.js"></script>
    <script src="../static/china.js"></script>
    <script src="../static/jquery-1.11.1.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;">

</div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

    var data = [
            {
              name: "北京",
              value: 212,
            },
            {
              name: "天津",
              value: 60,
            },
            {
              name: "上海",
              value: 208,
            },
            {
              name: "重庆",
              value: 337,
            },
            {
              name: "河北",
              value: 126,
            },
            {
              name: "河南",
              value: 675,
            },
            {
              name: "云南",
              value: 117,
            },
            {
              name: "辽宁",
              value: 74,
            },
            {
              name: "黑龙江",
              value: 155,
            },
            {
              name: "湖南",
              value: 593,
            },
            {
              name: "安徽",
              value: 480,
            },
            {
              name: "山东",
              value: 270,
            },
            {
              name: "新疆",
              value: 29,
            },
            {
              name: "江苏",
              value: 308,
            },
            {
              name: "浙江",
              value: 829,
            },
            {
              name: "江西",
              value: 476,
            },
            {
              name: "湖北",
              value: 13522,
            },
            {
              name: "广西",
              value: 139,
            },
            {
              name: "甘肃",
              value: 55,
            },
            {
              name: "山西",
              value: 74,
            },
            {
              name: "内蒙古",
              value: 34,
            },
            {
              name: "陕西",
              value: 142,
            },
            {
              name: "吉林",
              value: 42,
            },
            {
              name: "福建",
              value: 179,
            },
            {
              name: "贵州",
              value: 56,
            },
            {
              name: "广东",
              value: 797,
            },
            {
              name: "青海",
              value: 15,
            },
            {
              name: "西藏",
              value: 1,
            },
            {
              name: "四川",
              value: 282,
            },
            {
              name: "宁夏",
              value: 34,
            },
            {
              name: "海南",
              value: 79,
            },
            {
              name: "台湾",
              value: 10,
            },
            {
              name: "香港",
              value: 15,
            },
            {
              name: "澳门",
              value: 9,
            },
          ];
          // 指定图表的配置项和数据
          var option = {
            title: {
              text: "中国疫情图",
              left: "center",
            },
            tooltip: {
              trigger: "item",
            },
            legend: {
              orient: "vertical",
              left: "left",
              data: ["中国疫情图"],
            },
            visualMap: {
              type: "piecewise",
              pieces: [
                {
                  min: 1000,
                  max: 1000000,
                  label: "大于等于1000人",
                  color: "#372a28",
                },
                { min: 500, max: 999, label: "确诊500-999人", color: "#4e160f" },
                { min: 100, max: 499, label: "确诊100-499人", color: "#974236" },
                { min: 10, max: 99, label: "确诊10-99人", color: "#ee7263" },
                { min: 1, max: 9, label: "确诊1-9人", color: "#f5bba7" },
              ],
              color: ["#E0022B", "#E09107", "#A3E00B"],
            },
            toolbox: {
              show: true,
              orient: "vertical",
              left: "right",
              top: "center",
              feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true },
              },
            },
            roamController: {
              show: true,
              left: "right",
              //   mapTypeControl: {
              //     china: true,
              //   },
            },
            // bmap: {
            //   //
            // },
            geo: {
              //地理坐标系组件用于地图的绘制
              map: "china",
              roam: false, //不开启缩放和平移
              label: {
                normal: {
                  show: true,
                  fontSize: "10",
                  color: "rgba(0,0,0,0.7)",
                },
              },
              itemStyle: {
                normal: {
                  borderColor: "rgba(0, 0, 0, 0.2)",
                },
                emphasis: {
                  areaColor: "#F3B329", //鼠标选择区域颜色
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                  shadowBlur: 20,
                  borderWidth: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
            series: [
              {
                name: "确诊数",
                type: "map", //图表类型
                geoIndex: 0,
                data: data, //图表的数据
              },
              //   {
              //     name: "确诊数",
              //     // type: "scatter",
              //     // coordinateSystem: "bmap",
              //     type: "map",
              //     mapType: "china",
              //     data: data,
              //     // symbolSize: function (val) {
              //     //   return val[2] / 10;
              //     // },
              //     // encode: {
              //     //   value: 2,
              //     // },
              //     // label: {
              //     //     formatter: '{b}',
              //     //     position: 'right',
              //     //     show: false
              //     // },
              //     itemStyle: {
              //       color: "purple",
              //     },

              // emphasis: {
              //   label: {
              //     show: true,
              //   },
              // },
              //   },
              //   {
              //     name: "确诊数",
              //     type: "map",
              //     mapType: "china",
              //     roam: false,
              //     label: {
              //       show: true,
              //       color: "rgb(249, 249, 249)",
              //     },

              //   },
            ],
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
    </script>
</body>
</html>